<template>
    <el-container>
        <el-header>
            <!-- logo盒子 -->
            <div class="logo">
                <img src="../../assets/imgs/avater.png" alt="">
                <span class="title">科泰新冠物资管理系统</span>
            </div>
            <!-- 登录注销等操作的盒子 -->
            <div class="operation">
                <el-dropdown trigger="click" @command="handleCommand">
                    <img src="../../assets/imgs/avater.png" alt="">
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item icon="el-icon-house" command="home">首页</el-dropdown-item>
                        <el-dropdown-item icon="el-icon-switch-button" command="logout">注销</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </el-header>
        <el-container>
            <el-aside :width="isCollapse?'60px':'200px'">
                <!-- 折叠效果 -->
                <span class="collapse" @click="handleIsCollapse">
                    |||
                </span>
                <!-- 侧边栏 -->
                <el-menu
                    default-active="2"
                    :collapse=isCollapse
                    :collapse-transition=false
                    :router=true
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose"
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <Menu :menuData="menuData"></Menu>
                    </el-menu>
            </el-aside>
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    //导入组件
    import Menu from '../../components/Menu.vue'
    import { request } from '../../request/index.js'
    export default {
        data() {
            return {
                //定义一个是否折叠的属性
                isCollapse: false,
                //定义一个菜单数据
                menuData:[]
            }
        },
        components: {
            //注册组件
            Menu,
        },
        //创建页面得时候会调用这个方法
        created(){
            //发送一个请求拿菜单
            this.getMenuList();
        },
        methods: {
            async getMenuList(){
                let result= await request({
                    url:'/menu/getTree',
                    method:'get'
                })
                this.menuData=result.data.menTree
            },
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            handleCommand(command) {
                if(command==="logout"){
                    this.$router.push('/login');
                }
            },
            //处理折叠事件
            handleIsCollapse(){
                this.isCollapse = !this.isCollapse;
            }
        },
    }
</script>

<style lang="less" scoped>
  img{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin: 0px 20px;
  }
  .el-container{
      height: 100%;
  }

  .el-header {
    background-color: #545c64;
    display: flex;
    justify-content: space-between;

    .logo{
        display: flex;
        align-items: center;
        .title{
            font-size: 30px;
            color: pink;
        }
    }
  }
  
  .el-aside {
    background-color: #545c64;

    .el-aside{
        border: 0;
    }
    .collapse{
        background: orange;
        display: inline-block;
        width: 100%;
        height: 30px;
        color: black;
        text-align: center;
        line-height: 30px;
        font-size: 20px;
        font-weight: bold;
    }
  }
  
  .el-main {
    background-color: #E9EEF3;
  }
</style>